<template>
    <div class="app-container">
        <el-input v-model="filterText" placeholder="请输入关键字过滤" style="margin-bottom:30px;" />
        <el-tree ref="subjectTree" :data="subjectList" :props="defaultProps" :filter-node-method="filterNode"
            class="filter-tree" default-expand-all />
    </div>
</template>

<script>
import subjectApi from '@/api/subject'
export default {
    data() {
        return {
            filterText: '', // 过滤文本
            subjectList: [], // 数据列表
            defaultProps: {
                children: 'children',
                label: 'title'
            }
        }
    },
    created() {
        this.fetchNodeList()
    },
    watch: {
        filterText(val) {
            this.$refs.subjectTree.filter(val)
        }
    },

    methods: {
        fetchNodeList() {
            subjectApi.getNestedTreeList().then(response => {
                this.subjectList = response.data.items
            })
        },
        // 过滤节点
        filterNode(value, data) {
            if (!value) return true
            return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
        }
    }
}
</script>